<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8">
  <title><!--{$lang.page.index.title}--></title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="/static/lay/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="/static/lay/layui/index.css" media="all">
</head>
<body>

<div class="layui-fluid">
    <div class="layui-card">
      <div class="layui-card-body" style="padding: 15px;">
        <div class="layui-form-item" style="text-align: center; height: 50px;"><b><!--{$lang.page.public.confmg}--></b></div>
        <form name="addItem" method="post" lay-filter="component-form-group" class="layui-form">
          <input type="hidden" value="<!--{$datainfo.id}-->" name="id">
          <input type="hidden" value="<!--{$authtype.authtype}-->" name="authtype">

          <div class="layui-form-item">
              <div class="layui-inline">
                <label class="layui-form-label"><!--{$lang.page.table.name}--></label>
                <div class="layui-input-inline">
                  <input type="text" name="name" value="<!--{$datainfo.name}-->" lay-verify="name" placeholder="<!--{$lang.page.public.pinput}-->" autocomplete="off" class="layui-input" />
                </div>
              </div>

              <div class="layui-inline">
                <label class="layui-form-label"><!--{$lang.page.table.keyword}--></label>
                <div class="layui-inline">
                  <input type="text" name="keyname" value="<!--{$datainfo.keyname}-->" lay-verify="key"  placeholder="<!--{$lang.page.public.pinput}-->" autocomplete="off" <!--{if $userinfo eq 'superadmin'}-->class="layui-input" <!--{else}-->class="layui-input layui-btn-disabled" readonly<!--{/if}--> />
                </div>
              </div>
              <!--{if $userinfo eq 'superadmin'}-->
              <div class="layui-inline">
                <label class="layui-form-label"><!--{$lang.page.public.object}--></label>
                <div class="layui-inline">
                   <input type="radio" name="status" value="1" title="<!--{$lang.page.public.supperuser}-->" <!--{if $datainfo.status eq 1}--> checked<!--{/if}-->  >&nbsp;&nbsp;<input type="radio" name="status" value="2" title="<!--{$lang.page.public.user}-->" <!--{if $datainfo.status eq 2}--> checked<!--{/if}-->>
                </div>
              </div>
              <!--{/if}-->
          </div>

          <div class="layui-form-item showfk">
              <label class="layui-form-label"><!--{$lang.page.public.confset}--></label>
              <div class="layui-inline" id="submue"  style="width:85%;">
                <table class="layui-table" id="sharetable" lay-filter="table">
                <thead>
                    <tr>
                        <td width="20%">key</td>
                        <td width="35%">value</td>
                        <td width="35%"><!--{$lang.page.table.notes}--></td>
                        <!--{if $userinfo eq 'superadmin'}-->
                        <td width='10%'><a class="layui-btn layui-btn-xs addshare"><!--{$lang.page.public.add}--></a></td>
                        <!--{/if}-->
                    </tr>
                </thead>
                <tbody>
                    <!--{if empty($datainfo.content)}-->
                     <tr>
                     <td><input type="text" name="key[]" value="" lay-verify="key" placeholder="key" autocomplete="off" class="layui-input" <!--{if $userinfo neq 'superadmin'}-->readonly<!--{/if}-->/></td>
                     <td><input type="text" name="value[]" value="" lay-verify="value" placeholder="value" autocomplete="off" class="layui-input" /></td>
                     <td><input type="text" name="notes[]" value="" placeholder="notes" autocomplete="off" class="layui-input" /></td>
                     <!--{if $userinfo eq 'superadmin'}-->
                     <td><a class="layui-btn layui-btn-danger layui-btn-xs delshare"><!--{$lang.page.public.del}--></a></td>
                     <!--{/if}-->
                     </tr>
                     <!--{else}-->
                     <!--{foreach from=$datainfo.content item=item key=key}-->
                     <tr>
                     <td><input type="text" name="key[]" value="<!--{$key}-->" lay-verify="required" placeholder="key" autocomplete="off" <!--{if $userinfo eq 'superadmin'}-->class="layui-input" <!--{else}-->class="layui-input layui-btn-disabled" readonly<!--{/if}-->/></td>
                     <td><input type="text" name="value[]" value="<!--{$item}-->" lay-verify="required" placeholder="value" autocomplete="off" class="layui-input" /></td>
                     <td><input type="text" name="notes[]" value="<!--{$datainfo.notes[$key]}-->" placeholder="notes" autocomplete="off" class="layui-input" /></td>
                     <!--{if $userinfo eq 'superadmin'}-->
                     <td><a class="layui-btn layui-btn-danger layui-btn-xs delshare"><!--{$lang.page.public.del}--></a></td>
                     <!--{/if}-->
                     </tr>
                     <!--{/foreach}-->
                     <!--{/if}-->
                  </tbody>
                </table>
              </div>

            </div>
            <!--{if $authtype.authtype>1}-->
            <div class="layui-form-item">
              <label class="layui-form-label"><!--{$lang.page.public.inputcode}--></label>
                <div class="layui-inline">
                  <input type="text" name="code" lay-verify="code" placeholder="<!--{$lang.page.public.pinput}-->" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-inline">
                  <button type="button" class="layui-btn" id="sendCode" ><!--{$lang.page.public.send}--></button>
                  <div class="layui-btn" id="timer" style="display: none"><!--{$lang.page.public.wait}--></div>
                </div>
                <div class="layui-inline">
                  <!--{$lang.page.public.showpwd1}-->
                </div>
            </div>
            <!--{/if}-->
                  
          <div class="layui-form-item layui-layout-admin">
              <div class="layui-footer" style="left: 0;">
                <button class="layui-btn" type="button" id="submit" lay-submit lay-filter="submit"><!--{$lang.page.public.submit}--></button>
                <button type="reset" id='reset' class="layui-btn layui-btn-primary"><!--{$lang.page.public.reset}--></button>
                <button type="button" class="layui-btn layui-btn-primary" onClick="xadmin.close();" ><!--{$lang.page.table.back}--></button>
              </div>
          </div>

        </form>
      </div>
    </div>
  </div>
<script src="/static/lay/layui/layui.js"></script>
<script type="text/javascript">
    layui.config({
     base: '/static/lay/' //静态资源所在路径
   }).extend({
     xadmin: 'lib/xadmin' //弹窗
   }).use(['jquery', 'layer','xadmin', 'form', 'element'], function(){
    var form = layui.form;
    form.render(null, 'component-form-group');
    var authtype = $('input[name="authtype"]').val(); 

     /* 自定义验证规则 */
    form.verify({
      name: function(value){
        if(value.length < 1){
          return '<!--{$lang.page.table.name}--> <!--{$lang.page.public.nocontent}-->';
        }
      }
      ,key: function(value){
        if(value.length < 1){
          return '<!--{$lang.page.table.keyword}--> <!--{$lang.page.public.nocontent}-->';
        }
      }
      ,code: function(value){
        if(value.length < 1 && authtype>1){
          return '<!--{$lang.page.public.inputcode}--><!--{$lang.page.public.nocontent}-->';
        }
      }
    });

    //动态添加表单
    //因为动态添加的元素class属性是无效的，所以不能用
    $('body').on('click', '.addshare', function() {
      if ($('#sharetable tbody tr').length > 29) {
        layer.msg('<!--{$lang.page.public.moreset}-->20<!--{$lang.page.public.strip}-->', {
            offset: '20px', 
            time : 2000
        });
      }else{
      //添加html
        var html = '<tr>'+
          '<td><input type="text" name="key[]" value="" lay-verify="required" placeholder="key" autocomplete="off" class="layui-input" /></td>'+
          '<td><input type="text" name="value[]" value="" lay-verify="required" placeholder="value" autocomplete="off" class="layui-input" /></td>'+
          '<td><input type="text" name="notes[]" value="" placeholder="notes" autocomplete="off" class="layui-input" /></td>'+
          '<td>'+'<a class="layui-btn layui-btn-danger layui-btn-xs delshare"><!--{$lang.page.public.del}--></a>'+
          '</td>'+
          '</tr>';
        //添加到表格最后
        $(html).appendTo($('#sharetable tbody:last'));
        form.render();
      }
    });
    $('body').on('click', '.delshare', function() {
      if ($('#sharetable tbody tr').length === 1) {
        layer.msg('<!--{$lang.page.public.onenodel}-->', {
            time : 2000
        });
      } else {
        //删除当前按钮所在的tr
        $(this).closest('tr').remove();
      }
    });

    $('#sendCode').click(function(){
        $('#sendCode').attr("disabled",true);
        $('#sendCode').addClass('layui-btn-disabled');
        $.post('/admin/common/sendmail',{type:'authtype'},function(res){
                if(res.code == 200){
                  $('#sendCode').hide();
                  $('#timer').show();
                  timer(res.data.endtime);
                  layer.msg(res.msg);
                }else{
                  $('#sendCode').removeAttr("disabled");
                  $('#sendCode').removeClass('layui-btn-disabled');
                  layer.msg(res.msg);
                }
              })
    });

    form.on('submit(submit)', function (data) {
        $('#submit').attr("disabled",true);
        $('#submit').addClass('layui-btn-disabled');
        $.post('#',data.field,function(res){
            if(res.code == 200){
                layer.msg(res.msg);
                setTimeout(() => {
                    window.parent.location.reload();
                    xadmin.close();
                }, 1000);
              }else{
                $('#submit').removeAttr("disabled");
                $('#submit').removeClass('layui-btn-disabled');
                layer.msg(res.msg);
              }
        })
        return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
      });
    //重置按钮，可以提交失败的时候再次提交
    $('#reset').click(function(){
        $('#submit').removeAttr("disabled");
        $('#submit').removeClass('layui-btn-disabled');
    });

    function timer(time){
        var endtime =  time;
        if(endtime>0){
          let setInt=setInterval(() => {
              var countdownElement = document.getElementById("timer");
              var now = new Date().getTime(); // 当前时间
              var distance = Math.floor((endtime*1000 - now)/1000); // 距离结束日期还有多少时间
              if(distance<0){
                clearInterval(setInt); // 如果已经到达或超过了结束日期，清除定时器并隐藏倒计时元素
                countdownElement.style.display = "none";
                $('#sendCode').show();
                $('#sendCode').removeAttr("disabled");
                $('#sendCode').removeClass('layui-btn-disabled');
                return;
              }else{
                showtime = distance>0?distance:0;
                countdownElement.innerText = "" + showtime + "s"; // 更新倒计时内容
                return;
              }
          },1000)
        }else{
          countdownElement.style.display = "none";
          $('#sendCode').show();
      }
    }

  });

</script>
</body>
</html>

